<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
      <MyPlenr v-for="item in list" :key="item.id"
      :title="item.title"
      :content="item.content"
      />
  </div>
</template>

<script>

import MyPlenr from './MyPlenr.vue'
export default {
  data() {
    return {
      list:[
  {
    id:1,
    title: '芙蓉楼送辛渐',
    content:['寒雨连江夜入吴','平明送客楚山孤','洛阳亲友如相问','一片冰心在玉壶']
  },
  {
    id:2,
    title: '春晓',
    content:['春眠不觉晓','处处闻啼鸟']
  }
]
    }
  },
 components:{
   MyPlenr
 }
}
</script>

<style>
 body {
  background-color: #ccc;
 }
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
  }
  h3 {
    text-align: center;
  }
</style>
